<template>
  <div class="settings-page min-h-screen bg-gray-50 text-gray-900 transition-colors duration-300">
    <div class="container mx-auto px-4 py-8 max-w-4xl">
      <h1 class="text-3xl font-extrabold mb-8 text-center sm:text-left">
        应用设置
      </h1>

      <!-- 阅读偏好设置 -->
      <section class="settings-section bg-white rounded-xl shadow-sm p-6 mb-8 border border-gray-100">
        <h2 class="text-xl font-semibold mb-5 flex items-center">
          <BookOpenIcon class="w-6 h-6 mr-3 text-blue-500" />
          阅读偏好
        </h2>

        <!-- 字体大小 -->
        <div class="setting-item pb-5 border-b border-gray-200 mb-5">
          <h3 class="text-lg font-medium mb-3">
            字体大小
          </h3>
          <div class="flex items-center space-x-3">
            <button
              :disabled="appStore.fontSize === appStore.fontSizeOptions[0].value"
              class="px-3 py-1 bg-gray-100 text-gray-700 rounded-lg hover:bg-gray-200 disabled:opacity-50 transition-colors"
              @click="appStore.decreaseFontSize"
            >
              <MinusIcon class="w-5 h-5" />
            </button>
            <span class="text-lg font-medium">{{ appStore.currentFontSizeOption.label }}</span>
            <button
              :disabled="appStore.fontSize === appStore.fontSizeOptions[appStore.fontSizeOptions.length - 1].value"
              class="px-3 py-1 bg-gray-100 text-gray-700 rounded-lg hover:bg-gray-200 disabled:opacity-50 transition-colors"
              @click="appStore.increaseFontSize"
            >
              <PlusIcon class="w-5 h-5" />
            </button>
          </div>
          <p class="text-sm text-gray-500 mt-2">
            调整页面内容的显示字体大小。
          </p>
        </div>
      </section>

      <!-- 数据管理 -->
      <section class="settings-section bg-white rounded-xl shadow-sm p-6 mb-8 border border-gray-100">
        <h2 class="text-xl font-semibold mb-5 flex items-center">
          <ArchiveBoxIcon class="w-6 h-6 mr-3 text-purple-500" />
          数据管理
        </h2>

        <div class="setting-item">
          <h3 class="text-lg font-medium mb-3">
            清除所有本地数据
          </h3>
          <p class="text-sm text-gray-500 mb-4">
            此操作将清除所有本地缓存的设置、搜索历史和收藏数据，需要重新初始化应用。
          </p>
          <button
            class="px-5 py-2 bg-red-600 text-white rounded-lg hover:bg-red-700 transition-colors duration-200 shadow-md"
            @click="confirmClearData"
          >
            <TrashIcon class="w-5 h-5 inline-block mr-2" />
            立即清除
          </button>
        </div>
      </section>

      <!-- 关于应用 -->
      <section class="settings-section bg-white rounded-xl shadow-sm p-6 mb-8 border border-gray-100">
        <h2 class="text-xl font-semibold mb-5 flex items-center">
          <InformationCircleIcon class="w-6 h-6 mr-3 text-teal-500" />
          关于应用
        </h2>

        <div class="setting-item">
          <h3 class="text-lg font-medium mb-2">
            版本信息
          </h3>
          <p class="text-gray-700">
            当前版本: <span class="font-semibold">{{ appVersion }}</span>
          </p>
          <p class="text-sm text-gray-500 mt-2">
            民法典H5应用致力于提供便捷的法律查询服务。
          </p>
        </div>
      </section>
    </div>
  </div>
</template>

<script setup>
import { ref, computed } from 'vue'
import { useAppStore } from '@/stores/app'
import {
  BookOpenIcon,
  PlusIcon,
  MinusIcon,
  TrashIcon,
  ArchiveBoxIcon,
  InformationCircleIcon
} from '@heroicons/vue/24/outline'

const appStore = useAppStore()

const appVersion = ref('v1.3.4-dev') // 示例版本号，可从package.json或config文件动态获取

const confirmClearData = () => {
  if (window.confirm('您确定要清除所有本地数据吗？这将包括所有设置、搜索历史和收藏，且无法恢复。')) {
    clearAllLocalData()
  }
}

const clearAllLocalData = () => {
  localStorage.clear() // 清除所有localStorage数据
  appStore.resetAllStores() // 假设有一个重置所有store的方法
  appStore.addNotification({ type: 'success', message: '所有本地数据已清除！' })
  // 重载页面以确保所有状态重新初始化
  window.location.reload()
}

// 为了演示，App Store中需要一个resetAllStores方法
// 实际应用中，你可能需要遍历所有Pinia store并调用其reset方法
// 或者设计一个更完善的数据管理机制
// 这里暂时模拟一个空函数，实际需要根据项目结构实现
appStore.resetAllStores = () => {
  console.log('所有Pinia store已重置（模拟）');
  // 例如:
  // useFavoritesStore().$reset()
  // useSearchStore().$reset()
  // 等等...
}

</script>

<style scoped>
.settings-page {
  @apply min-h-screen;
}

.settings-section {
  @apply bg-white rounded-xl shadow-sm p-6 mb-8 border border-gray-100;
}

.settings-section h2 {
  @apply text-xl font-semibold mb-5 flex items-center;
}

.setting-item {
  @apply py-4;
}

.setting-item:not(:last-child) {
  @apply border-b border-gray-200;
}

</style>
